<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useFuncStore } from '../../store';
import { computed, nextTick, reactive, ref } from 'vue';
import { ElMessageBox, FormRules } from 'element-plus';

const {funcTreeWithNoLeaf,allFuncs} = storeToRefs(useFuncStore());
const show =ref<boolean>(false)
const model=reactive<API.Func.Update>({func_id:0,func_name:'',func_fid:32})
const cascaderValue=computed({
    get:()=>{
        let idPath=[model.func_fid],fid=model.func_fid;
        while(fid!==0){
            fid=allFuncs.value.find(item=>item.func_id===fid)?.func_fid as number
            
            idPath.unshift(fid)
        }
        return idPath
    },
    set:(value:number[])=>{
        model.func_fid=value[value.length-1]
    }
})
interface emitsType{
    (name:'save',func:API.Func.Update):void
}
const emit=defineEmits<emitsType>()
defineExpose({
    begin:(func:UI.Func)=>{
        model.func_id=func.func_id
        model.func_name=func.func_name
        model.func_fid=func.func_fid
        nextTick(()=>  show.value=true)
    },
    end:()=>show.value=false
    
})
const cancel=()=>{
ElMessageBox({
    title:'退出',
    message:'确定要取消吗？取消填写的数据会消失',
    showCancelButton:true
}).then(()=>{
    show.value=false
})

}
const rules:FormRules={
  func_name:[
    {required:true,message:"名字不能为空",trigger:"blur"},
    {min:2,max:10,message:"名字长度在2到10之间",trigger:"blur"}
  ]
  }
</script>

<template>
   <el-dialog v-model="show" title="功能管理--修改"   >
    <el-form :rules="rules">
        <el-form-item label="功能名称：" prop="func_name">
            <el-input v-model="model.func_name"></el-input>
        </el-form-item>
        <el-form-item label="父级功能：">
           <el-cascader 
           v-model="cascaderValue"
           :options="funcTreeWithNoLeaf" 
           :props="{value:'func_id',label:'func_name'
           ,checkStrictly:true}"
           :collapse-tags="true" 
           :collapse-tags-tooltip="true"
           ></el-cascader>
        </el-form-item>
    </el-form>
    <template #footer>
        <div>
            <el-button type="primary" @click="emit('save',model)">保存</el-button>
            <el-button type="primary" @click="cancel">取消</el-button>
        </div>
    </template>
   </el-dialog>
</template>

<style scoped>

</style>